<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>添加食品</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        body {
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: left;
            transition: transform 0.3s ease;
        }
        .container:hover {
            transform: scale(1.02);
        }
        h4 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
            font-size: 14px;
        }
        input[type="text"], input[type="number"], textarea, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .upload-container {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 120px;
            padding: 0;
            margin-bottom: 15px;
            border: none;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            background-color: #f9f9f9;
            color: #666;
            font-size: 14px;
        }
        .upload-container span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .upload-container input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        input[type="submit"] {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        button[type="reset"] {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        button[type="reset"]:hover {
            background-color: #495057;
        }
        .return-button {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }
        .return-button:hover {
            background-color: #495057;
        }
        .preview-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }


    </style>
    <script>
        function validateForm() {
            const foodName = document.querySelector('input[name="foodName"]').value;
            const price = document.querySelector('input[name="price"]').value;
            const foodStatus = document.querySelector('select[name="foodStatus"]').value;

            if (!foodName || !price || !foodStatus) {
                alert('请填写所有必填项');
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
<div class="container">
    <h4>添加食品</h4>
    <form name="addFoodForm" action="addFood" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">食品名称</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="foodName" placeholder="请输入食品名称" required />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">食品图片</label>
            <div class="col-sm-9">
                <div class="upload-container">
                    <span>点击上传</span>
                    <input type="file" class="form-control" id="foodImg" name="foodImg" accept="image/*" style="display: none;" />
                    <img id="previewImage" class="preview-image" src="" style="display: none;">
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">价格</label>
            <div class="col-sm-9">
                <input type="number" class="form-control" name="price" placeholder="请输入价格" required />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">售卖状态</label>
            <div class="col-sm-9">
                <select class="form-control" name="foodStatus" required>
                    <option value="起售">售卖中</option>
                    <option value="停售">售罄</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12 text-center">
                <input type="submit" value="添加" />
                <a href="adminFoodList.jsp" class="return-button">返回</a>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 绑定点击事件到上传容器
        document.querySelector('.upload-container').addEventListener('click', function() {
            // 触发文件输入的点击事件，弹出文件选择对话框
            document.getElementById('foodImg').click();
        });

        // 当文件输入的值改变时（即用户选择了文件）
        document.getElementById('foodImg').addEventListener('change', function(event) {
            var file = event.target.files[0];
            if (file) {
                var formData = new FormData();
                formData.append('foodImg', file);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'uploadFile', true);

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var imageUrl = xhr.responseText;
                        var previewImage = document.getElementById('previewImage');
                        previewImage.src = imageUrl;
                        previewImage.style.display = 'block';
                        var imgInput = document.createElement('input');
                        imgInput.type = 'hidden';
                        imgInput.name = 'foodImgUrl'; // 与服务器端接收的字段名对应
                        imgInput.value = imageUrl;
                        document.forms['addFoodForm'].appendChild(imgInput);
                    } else {
                        console.error('File upload failed:', xhr.statusText);
                    }
                };

                xhr.send(formData);
            }
        });

        // 修改表单提交事件
        document.forms['addFoodForm'].addEventListener('submit', function(event) {
            // 在这里可以进一步处理表单数据，如果需要的话
            // 例如，可以验证表单数据或添加额外的数据

            // 确保图片已经上传并获取了URL
            var imageUrlInput = document.querySelector('input[name="foodImgUrl"]');
            if (!imageUrlInput) {
                alert('请先上传图片');
                event.preventDefault(); // 阻止表单提交
                return false;
            }
        });
    });


</script>
</body>
</html>
